const ratings = document.querySelectorAll('.rating')
const sendbtn = document.querySelector('.sendbtn')
const panel = document.getElementById('panel')

let feedback = ['Unhappy', 'Neutral', 'Satisfied']
let idx = 2

ratings.forEach((rate, id) => {
    rate.addEventListener('click', () => {
        removeActive()
        rate.classList.add('active')
        idx = id
    })
})

var removeActive = function () {
    ratings.forEach(rate => {
        rate.classList.remove('active')
    })
}
sendbtn.addEventListener('click', () => {
    panel.innerHTML = `<i class="fas fa-heart"></i><br>
    <strong>Thank You!</strong>
    <br>
    <strong>Feedback: ${feedback[idx]}</strong>
    <p>We'll use your feedback to improve our customer support</p>`
})